<template>
  <div class="recharge">
    <van-nav-bar
      title="充值"
      left-arrow
      @click-left="onClickLeft"
    />
    <main>
      <div class="balance">
        当前余额：{{ balance }}
      </div>
      <van-cell-group inset>
      <van-field
        type="number"
        v-model="moneys"
        label="充值金额："
        left-icon="smile-o"
        right-icon="balance-o"
        format-trigger="onBlur"
        size="50vw"
      />
    </van-cell-group>
    <van-button type="primary" block @click="rechargeBtn">充值</van-button>
  </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { rechargeApi,balanceApi } from '@/server';
const onClickLeft = () => history.back();
const moneys = ref('');
const balance=ref()
// 查看余额
const balanceData=async ()=>{
  let res=await balanceApi()
  console.log(res);
  balance.value=res.data.result.money
}
balanceData()
// 充值
const rechargeBtn=async ()=>{
  let res=await rechargeApi({money:Number(moneys.value)})
  if(res.status===200){
    moneys.value=''
  }
  balanceData()
}
</script>

<style lang='scss' scoped>
.recharge{
  width: 100vw;
  main{
    .balance{
      text-align: center;
      margin: 0 auto;
      width: 90.6667vw;
      height: 8vw;
      line-height: 8vw;
      font-size: 5vw;
    }
    .van-button{
      margin: 0 auto;
      width: 94.6667vw;
      border-radius: 2.6667vw;
    }
  }
}
</style>
